import React, { useEffect } from 'react'
import { TabBarWrapper } from './style'
import Swiper from 'swiper'

interface TabBarProps{
TabBar:any[];
cartList:any[];
}

let everList=['4万以下','4-8万','8-15万','15-25万','更多']
const TabBar:React.FC<TabBarProps> =(props)=>{
useEffect(()=>{
      var mySwiper = new Swiper('.swiper',{
        scrollbar: {
          el: '.swiper-scrollbar',
        },
      }); 
})
  
    const {
        TabBar,
        cartList
    }=props
    return(
        <TabBarWrapper>     
            <div className="swiper">
    <div className="swiper-wrapper">
        <div className="swiper-slide slide">
            {
               TabBar.map(data=>(
                <div className='tabBar-header'>
                 <img src={data.img} alt="" />
                <p key={data.id}>{data.title}</p> 
                </div> 
               )   
               )
            }    
        </div>
        
    </div>
    <div className="swiper-scrollbar"></div>
</div>    

<div className="swiper">
    <div className="swiper-wrapper">
        <div className="swiper-slide slide">
            {
               cartList.map(data=>(
                <div className='tabBar-header'>
                 <img src={data.img} alt="" />
                <p key={data.id}>{data.title}</p> 
                </div> 
               )   
               )
            }    
        </div>
        
    </div>
    <div className="swiper-scrollbar"></div>
</div>    
<div className='tabbar-ever'>
    {
        everList.map(data=>(
            <span>{data}</span>
        )

        )
    }
    
</div>
        </TabBarWrapper>
    )
}



export default React.memo(TabBar)